import React from 'react';
import { Component } from 'react';
import BannerItem from './bannerItem/BannerItem.jsx';
require('./Title.scss');

export default class Title extends Component {
  constructor() {
      super();
  }
  render() {
      const data = [
        {src:"3.png", name: "111"},
        {src:"3.png", name: "222"},
        {src:"3.png", name: "333"},
        {src:"3.png", name: "444"},
        {src:"3.png", name: "555"},
        {src:"3.png", name: "666"},
        {src:"3.png", name: "777"},
        {src:"3.png", name: "888"},
        {src:"3.png", name: "555"},
        {src:"3.png", name: "666"},
        {src:"3.png", name: "777"},
        {src:"3.png", name: "888"},
        {src:"3.png", name: "888"},
        {src:"3.png", name: "888"}
    ];
    while(data.length%8!==0){
      data.push({});
    }
    var arr = [], temp_arr = [];
    data.forEach((item, i)=>{
      temp_arr.push(item);
      if((i+1)%8==0){
        arr.push(temp_arr.concat());
        temp_arr = [];
      }
    });

    var focus_index = 0;
    return (
	    <div className="container">
        <div className="content">
          {
            arr.map((array, i)=>{
              return <div className="part" key={i}>
                {
                  array.map((item, index)=>{
                    return <BannerItem banner={item} index={index} key={index}/>
                  })
                }
              </div>
            })
          }
        </div>
        <div className="bottom_index_navigation">
          <div className="index_navigation">
            {
              arr.map((array, index)=>{
                var color = focus_index===index?"rbg(100,100,100,1)":"rbg(160,160,160,0.8)";
                return <div className="index_button" style={{backgroundColor:color}} key={index}></div>
              })
            }
          </div>
        </div>
      </div>
    )
  }
};